<template>
    <!-- 防伪系统 -->
    <div class="boxs margin_top">
        <headers :pageindex="2"></headers>
        <div :class="!ismobile ? 'pce' : 'mobe'">

            <div class="good">
                <div class="top">
                    <img :src="detail.logo" alt="">
                    <div>
                        <div>{{ detail.name }}</div>
                        <div>{{ detail.summary }}</div>
                    </div>
                </div>
                <!-- <div class="bottom">
                <div class="btn">文本语言</div>
                <div class="btn">聊天机器</div>
            </div> -->
            </div>
            <div class="btns">
                <div>{{ $route.query.word1 }}</div>
                <div>{{ $route.query.word2 }}</div>
            </div>
            <div class="content" v-html="detail.description">

            </div>
            <!-- <div class="dianzan">
                <div>
                    <span class="iconfont icon-hezuoshangjia"></span>
                    <span>12</span>
                </div>
                <div>
                    <span class="iconfont icon-zhengyan"></span>
                    <span>12</span>
                </div>
            </div> -->
            <div class="btn" @click="golink">进 入</div>
        </div>


        <bottoms></bottoms>
    </div>
</template>

<script>


import bottoms from "./modle/bottoms.vue"
import headers from "./modle/headers.vue"

export default {
    name: 'HelloWorld',
    components: {
        headers,
        bottoms,
    },
    data() {
        return {
            ismobile: "",
            detail: {}
        }
    },
    methods: {
        golink() {
            window.open(this.detail.link)
        },
        getdata() {
            this.$api.get(
                "/api/PortalHome/get_tool_details",
                {
                    tools_id: this.$route.query.id
                },
                (r) => {
                    this.detail = r.DATA
                },
                (f) => { }
            );
        },
    },
    created() {
        this.getdata()
    },
    mounted() {
        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.btn {
    width: 10rem;
    margin: 0 auto;
    background: #268bd2;
    color: white;
    text-align: center;
    line-height: 2rem;
    border-radius: 0.9rem;
    font-size: 1rem;
    margin-bottom: 5rem;
    margin-top: 2rem;
}

.dianzan {
    width: 100%;
    overflow: hidden;
    padding-right: 1rem;
    color: rgb(81, 81, 81);

    >div {
        float: right;
        margin-left: 0.9rem;

        >span:nth-child(1) {
            font-size: 1.2rem;
        }

        >span:nth-child(2) {
            font-size: 1.1rem;
        }
    }

    >div:nth-child(1) {
        >span:nth-child(1) {
            font-size: 1.1rem;
        }
    }
}

.content {
    padding: 1.5rem;
    text-indent: 2rem;
    line-height: 1.5rem;
    color: #404040;
    font-size: 0.9rem
}

.btns {
    width: 100%;
    padding: 0 1.5rem;
    overflow: hidden;

    >div {
        border-radius: 0.7rem;
        font-size: 0.8rem;
        width: 6rem;
        margin-right: 0.6rem;
        line-height: 1.7rem;
        text-align: center;
        float: left;
    }

    >div:nth-child(1) {
        background-color: #cb4b16;
        color: #fff;
    }

    >div:nth-child(2) {
        background-color: #268bd2;
        color: #fff;
    }
}

.good {
    padding: 1.5rem;

    .bottom {
        overflow: hidden;
        margin-top: 1rem;

        .btn {
            width: 6rem;
            text-align: center;
            font-size: 0.8rem;
            border-radius: 1.4rem;
            float: left;
            line-height: 2rem;
            margin-right: 0.5rem;

            background: #f8f5f5;
        }
    }

    .top {
        overflow: hidden;

        >img {
            width: 4rem;
            height: 4rem;
            border-radius: 0.8rem;
            float: left;

        }

        >div {
            float: left;
            font-size: 1rem;
            margin-left: 1.2rem;

            >div:nth-child(1) {
                margin-top: 0.7rem;
            }

            >div:nth-child(2) {
                font-size: 0.8rem;
                margin-top: 0.3rem;
                color: #1d232b;
            }

        }

    }
}

.pce {
    width: 1000px;
    margin: 0 auto;
    margin-top: 12rem;
    min-height: 50vh;

    .top {
        overflow: hidden;

        >img {
            width: 6rem;
            height: 6rem;
        }

        >div {
            float: left;
            font-size: 1.8rem;
            margin-left: 1.2rem;

            >div:nth-child(1) {
                margin-top: 0.7rem;
            }

            >div:nth-child(2) {
                font-size: 1.2rem;
                margin-top: 0.7rem;
            }

        }
    }

    .btns {
        width: 100%;
        padding: 0 1.5rem;
        overflow: hidden;

        >div {
            border-radius: 0.9rem;
            font-size: 1rem;
            width: 7rem;
            margin-right: 0.6rem;
            line-height: 1.9rem;
        }

    }

    .content {
        text-indent: 2.5rem;
        line-height: 1.9rem;
        color: #404040;
        font-size: 1.2rem
    }

    .dianzan {
        padding-right: 0rem;

        >div {
            float: right;
            margin-left: 0.9rem;

            >span:nth-child(1) {
                font-size: 1.5rem;
            }

            >span:nth-child(2) {
                font-size: 1.4rem;
            }
        }

        >div:nth-child(1) {
            >span:nth-child(1) {
                font-size: 1.3rem;
            }
        }
    }

    .btn {
        width: 15rem;
        margin: 0 auto;
        background: #268bd2;
        color: white;
        text-align: center;
        line-height: 2.6rem;
        border-radius: 1.4rem;
        font-size: 1.1rem;
        margin-bottom: 5rem;
        margin-top: 2rem;
    }
}
</style>
